<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" @Launchform="Launchform" />
    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '5px' }">
      <div style="display: flex; flex-wrap: wrap">
        <el-card style="width: 40%" shadow="never" :body-style="{ padding: '0' }">
          <div>
            <h1>{{ $t(`Print.SelectInstruction`) }}</h1>
            <Table
              :summaryData="summaryData1"
              summary
              :tableData="TabularPresentationData.soleMessage.list"
              :tableHeader="tableHeader"
              :TableHeight="100"
              :outTableHeight="65"
              :isLoading="isLoading"
            />
          </div>
        </el-card>

        <el-card style="width: 20%" shadow="never" :body-style="{ padding: '0' }">
          <div style="margin-left: 20px">
            <h1>{{ $t(`Print.InboundInformation`) }}</h1>
            <Table
              :tableData="TabularPresentationData.outInStock.inStock"
              :tableHeader="tableHeader2"
              :TableHeight="100"
              :outTableHeight="65"
              :isLoading="isLoading1"
            />
          </div>
        </el-card>

        <el-card style="width: 20%" shadow="never" :body-style="{ padding: '0' }">
          <div style="margin-left: 20px">
            <h1>{{ $t(`Print.IssuingInformation`) }}</h1>
            <Table
              :tableData="TabularPresentationData.outInStock.outStock"
              :tableHeader="tableHeader3"
              :TableHeight="100"
              :outTableHeight="65"
              :isLoading="isLoading2"
            />
          </div>
        </el-card>
      </div>
      <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'BottomWarehouseWarehousingKt'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { DropDownData } from '@/api/GeneralManager/Factoryinquiry/BottomWarehouseWarehousingKt'
import { TheBottomWarehouseStoresTheQueryData } from '@/api/GeneralManager/Factoryinquiry/BottomWarehouseStorageQueryKl'
import type {
  BottomStoreInterface,
  TheParametersAreStoredInTheBottomWarehouse
} from '@/api/GeneralManager/Factoryinquiry/BottomWarehouseStorageQueryKl'
import { ref, onMounted } from 'vue'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入底模',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '类型',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '收发日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
  // {
  //   type: 'button',
  //   checkboxLabel: '导出收发料报表'
  // },
  // {
  //   type: 'input',
  //   inputLabel: '日期',
  //   inputDisabled: true,
  //   inputValue: '2023-06-21'
  // }
])

const isLoading = ref(true)
const isLoading1 = ref(true)
const isLoading2 = ref(true)

// 收集需要的参数
const RequiredParameters = ref<TheParametersAreStoredInTheBottomWarehouse>({
  color: '',
  inOutEndDate: '',
  inOutStartDate: '',
  lotNo: '',
  moldNo: '',
  pageNum: 1,
  pageSize: 40,
  partName: '',
  style: ''
})

// 表格展示数据
const TabularPresentationData = ref<BottomStoreInterface>({
  outInStock: {
    inStock: [],
    outStock: []
  },
  soleMessage: {
    total: 0,
    stockTotal: 0,
    list: []
  }
})

// 计算金额总数
const summaryData1 = ref<summaryDataType[]>([
  {
    index: 4,
    num: 0
  }
])

interface summaryDataType {
  index: number
  num: number | undefined
}

const ConsumableTableData = async () => {
  isLoading.value = true
  if (formList.value[3].selectValue !== '') {
    const result = await TheBottomWarehouseStoresTheQueryData(RequiredParameters.value)
    total.value = result.soleMessage.total
    TabularPresentationData.value.soleMessage.list = result.soleMessage.list
    TabularPresentationData.value.outInStock.inStock = result.outInStock.inStock
    TabularPresentationData.value.outInStock.outStock = result.outInStock.outStock
    summaryData1.value[0].num = result.soleMessage.stockTotal
    isLoading.value = false
    isLoading1.value = false
    isLoading2.value = false
  }
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const ObtainDataFromTheDropDownBox = async () => {
  const result = await DropDownData()
  formList.value[3].selectOptions = EvaluatesTheArrayReturnValue(result.parts)
  formList.value[3].selectValue = result.parts[0]
  RequiredParameters.value.partName = result.parts[0]
}

const interAceFunct = () => {
  // 下拉框数据
  ObtainDataFromTheDropDownBox()

  // 获取主体数据
  ConsumableTableData()
}

onMounted(() => {
  interAceFunct()
})

const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    label: '库存数量',
    prop: 'stockQty'
  }
])

const tableHeader2 = ref([
  {
    label: '厂商',
    prop: 'DEPT_NAME'
  },
  {
    label: '数量',
    prop: 'QTY'
  }
])

const tableHeader3 = ref([
  {
    label: '部门',
    prop: 'DEPT_NAME'
  },
  {
    label: '数量',
    prop: 'QTY'
  }
])

// 分页器
const total = ref(0)

const handleSizeChange = (val: number) => {
  RequiredParameters.value.pageNum = val
  ConsumableTableData()
}

const handleCurrentChange = (val: number) => {
  RequiredParameters.value.pageSize = val
  ConsumableTableData()
}

const Launchform = (val: any) => {
  RequiredParameters.value.lotNo = val[0].inputValue
  RequiredParameters.value.style = val[1].inputValue
  RequiredParameters.value.moldNo = val[2].inputValue
  RequiredParameters.value.inOutStartDate = val[4].dateValue[0]
  RequiredParameters.value.inOutEndDate = val[4].dateValue[1]
  RequiredParameters.value.partName = val[3].selectValue
  ConsumableTableData()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 14px;
}
</style>
